
<script setup lang="ts">
	import {ref,reactive,getCurrentInstance} from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	
	const userStoreInfo = userStore();
	import {userStore} from '@/pinia';
	let vipObj = reactive({	
		state:0,
		vipOpenId:"1",
		headDetail:[],
		mainDetail:[],
		buyObj:{},
		
		type:'',
		showSelect:false,
		actions:[],
		cardListActions:[],
		jobActions:[],
		jobInfo:{},
		cardInfo:{}
	})
	const change = (idx) => {
		vipObj.buyObj = vipObj.mainDetail[idx]
		vipObj.state = idx
		console.log(vipObj.state)
	}
	const {proxy} = getCurrentInstance()
	const getList = ()=>{
		// let type = '1'
		// if(userStoreInfo.userFlag == 0){
		// 	type = '0'
		// }
		proxy.$req('GET', proxy.$api.meiyeRecruitJob3List,{pageNo:1,pageSize:100,status:1}).then((res) => {
			console.log(res);
			if(res.code === 200){
				res.result.records.forEach(el=>{
					el.name = el.jobName
				})
				vipObj.jobActions = res.result.records
			}
		})
	}
	// 获取卡
	const getVipCardList = ()=>{
		proxy.$req('GET', proxy.$api.meiyeRecruitVipCard3List,{type:1}).then((res) => {
			console.log(res);
			if(res.code === 200){
				res.result.records.forEach(el=>{
					el.name = el.cardName
				})
				vipObj.cardListActions = res.result.records
			}
		})
	}
	
	
	
	const submitOrder = () => {
		proxy.$req('POST', proxy.$api.meiyeRecruitHunterInfo2Pay, {
			vipId:vipObj.cardInfo.id,
			jobId:vipObj.jobInfo.id
			// memberId: userStoreInfo.userInfo.id,
			// vipCardSettingId: vipOpenId.value
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				let url = JSON.parse(res.result.result).resp_data.counter_url
				// #ifdef APP-PLUS
				plus.runtime.openURL(url)
				console.log('app');
				// #endif
				// #ifdef H5
				window.open(url)
				console.log('h5');
				// #endif
				//支付成功或者失败的回调缺少
			}
		})
	}
	const showSelectBtn = (type)=>{
		vipObj.type = type
		switch (type){
			case 'jobName':
				vipObj.actions = vipObj.jobActions
				break;
			case 'card':
				vipObj.actions = vipObj.cardListActions
				break;
			default:
				break;
		}
		vipObj.showSelect = true
	}
	
	const SelectFun = (e)=>{
		console.log(e)
		if(vipObj.type=='card'){
			vipObj.cardInfo = e
		}else if(vipObj.type=='jobName'){
			vipObj.jobInfo = e
		}
	}
	onLoad(()=>{
		getList()
		getVipCardList()
	})
</script>

<template>
	<view class="topBox">
			<u-navbar class="navbar"  bgColor="rgba(255, 255, 255, 0)" :placeholder="false" title="" :autoBack="true">
				<template #left>
					<view> <u-icon name="arrow-left"  size="17px"></u-icon> </view>
				</template>
				<template #center>
					<view>职位置顶</view>
				</template>
			</u-navbar>
			
			<view class="juxing">
				<view class="title">置顶，页面前排展示</view>
				<view class="desc">更多曝光，更多关注</view>
				<view class="desc">一键设置，操作简单</view>
			</view>
			<view class="main">
				<view class="function" @click="showSelectBtn('jobName')">
					<text class="title">置顶职位</text>
					<view class="funcItem">
						<text :class="!vipObj.jobInfo.jobName?'nodata':''">{{vipObj.jobInfo.jobName?vipObj.jobInfo.jobName:'请选择职位'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="function" @click="showSelectBtn('card')">
					<text class="title">置顶时长</text>
					<view class="funcItem">
						<text>{{vipObj.cardInfo.cardName }}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="foot">
				<view class="footMain">
					<view class="footLeft">
						<view>
							<text class="footTitle">{{vipObj.cardInfo.cardName || ''}}</text><text style="color: red;">￥</text><text class="footnum intFont">{{vipObj.cardInfo.money|| ''}}</text>
						</view>
						<view class="footDay" v-if='vipObj.cardInfo.money'>
							{{Math.floor(vipObj.cardInfo.money/vipObj.cardInfo.days * 100) / 100}}元/天
						</view>
					</view>
					<view class="footRight" @click="submitOrder">
						立即开通
					</view>
				</view>
			
			</view>
			
			<u-action-sheet
				:show="vipObj.showSelect"
				:actions="vipObj.actions"
				title="请选择"
				description=""
				@close="vipObj.showSelect = false"
				@select="SelectFun">
			</u-action-sheet>
	</view>
</template>

<style lang="scss" scoped>
	page{
		background-color: #FAFAFA;
	}
	

	.foot{
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0,0,0,0.05);
		position: fixed;
		bottom: 0;
		padding: 0rpx 40rpx;
		box-sizing: border-box;
		.footMain{
			display: flex;
			justify-content: space-between;
			.footnum{
				font-size: 56rpx;
				font-weight: bold;
				color: #F22F19;
			}
			.footTitle{
				font-size: 36rpx;
				font-weight: 500;
				color: #000000;
			}
			.footDay{
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.45);
			}
			.footRight{
				margin-top: 12rpx;
				width: 440rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				color: #FFFFFF;
				background: linear-gradient(137deg, #8F3D47 0%, #CA5F74 100%);
				border-radius: 16rpx;
			}
		}
	}
	.main{
		width: 750rpx;
		border-radius:20rpx 20rpx 0 0 ;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.04);
		padding:24rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		
		.function {
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom:20rpx;
			.title{
				font-size: 32rpx;
				// font-weight: 600;
			}
			.funcItem {
				display: flex;
				align-items: center;
				text{
					margin-right: 10rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0,0,0,0.85);
				}
				
				.nodata{
					color: #9f9ea1;
				}
			}
		}
	}
	.topBox{
		width: 750rpx;
		height: 444rpx;
		background-image: url(@/static/images/mineBg.png);
		// background-image: url(@/static/images/VipBackground.png);
		background-size: cover;
		padding: 120rpx 0 0 0 ;
		box-sizing: border-box;
		.juxing{
			width: 686rpx;
			// height: 232rpx;
			margin: 0 auto;
			// background-image: url(@/static/images/buyVipjuxing.png);
			// background-size: cover;
			padding: 30rpx;
			box-sizing: border-box;
			.title{
				font-size:32rpx;
				font-weight:600;
				margin-bottom:30rpx;
			}
			.desc{
				font-size:24rpx;
				color:#9f9ea1;
			}
			.juxingTitle{
				width: 200rpx;
			}
			.tilte2{
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.45);
				line-height: 32rpx;
			}
			.oneLine,.twoLine{
				display: flex;
				width: 600rpx;
				margin-bottom: 5rpx;
			}
			.line,.line2{
				padding: 10rpx 0;
				box-sizing: border-box;
			}
			.line{
				width: 200rpx;
			}
			.line2{
				width: 100rpx;
			}
			.num{
				font-size: 20rpx;
				font-weight: 400;
				color: #000000;
				line-height: 37rpx;
				margin-left: 20rpx;
			}
		}
		

	}
	
	
</style>
